<template>
	<el-card style="height: 500px">
		<el-card
			v-show="isShow"
			class="image_button"
			style="
				 {
					padding: 20px;
				}
			"
		>
			<img src="/img.png" alt="默认背景" style="display: block; margin-left: auto; margin-right: auto" />
		</el-card>
		<el-card
			v-show="!isShow"
			class="image_button"
			style="
				 {
					padding: 20px;
				}
			"
		>
			<el-card :style="{ visibility: picShow ? 'visible' : 'hidden' }">
				<img :src="def + 'sys/object/readFile?accessToken=' + cache.getToken() + '&filePath=' + path" style="width: 100px; height: 100px" />
				<el-button style="margin-left: 30px" type="primary" link @click="downloadHandle(path)"> 下载图片</el-button>
			</el-card>
			<el-upload
				ref="uploadRef"
				class="upload-demo"
				:http-request="uploadFiles"
				:auto-upload="false"
				:on-success="handleSuccess"
				style="margin: 100px 0px 0px 400px"
			>
				<template #trigger>
					<el-button type="primary" class="mr-10">选择待加密的图片</el-button>
				</template>

				<el-button class="ml-3" type="success" @click="submitUpload">点击加密</el-button>

				<template #tip>
          <div class="el-upload__tip">图片格式为jpg/png，图片需要在1MB-100MB</div>
				</template>
			</el-upload>
		</el-card>
		<el-button type="primary" style="float: right; margin-right: 400px" @click="changeStatus()">加密/解密</el-button>
	</el-card>
</template>

<script setup lang="ts" name="imageIndex">
import { reactive, ref } from 'vue'
import { ElMessage, UploadFile, UploadFiles, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
import constant from '@/utils/constant'
import service from '@/utils/request'
import cache from '@/utils/cache'
import axios from 'axios'

//变动
let isShow = ref(true)
const url = import.meta.env.VITE_API_URL
const def = ref(url)
const path = ref('')
//图片是否展示
let picShow = ref(false)
const changeStatus = () => {
	isShow.value = !isShow.value
}

//文件结构体
const dataForm = reactive({
	sysObjectId: '',
	sysObjectName: '',
	sysObjectPath: '',
	sysOrgId: '',
	sysObjectSize: '',
	updater: ''
})
//上传图片
const uploadRef = ref<UploadInstance>()

const submitUpload = () => {
	uploadRef.value!.submit()
}

const uploadFiles = async file => {
	const formData = new FormData()
	formData.append('imgOri', file.file)
	formData.append('imgWm', file.file)
	await service.post(constant.uploadEncUrl, formData).then(res => {
		path.value = res.data
	})
}
//图片下载
const downloadHandle = (url: string, filename?: string): Promise<any> => {
	return axios({
		url: import.meta.env.VITE_API_URL + 'sys/object/download?accessToken=' + cache.getToken() + '&filePath=' + url,
		method: 'GET',
		responseType: 'blob'
	}).then(res => {
		const down = document.createElement('a')
		// 文件名没传，则使用时间戳
		let fileType = 'png'
		down.download = filename || `${new Date().getTime().toString()}.${fileType}`

		// 隐藏a标签
		down.style.display = 'none'

		// 创建下载url
		let binaryData = [res.data]
		down.href = URL.createObjectURL(new Blob(binaryData, { type: 'image/png' })) // 注意这里设置了文件类型

		// 模拟点击下载
		document.body.appendChild(down)
		down.click()

		// 释放URL
		URL.revokeObjectURL(down.href)
		// 下载完成移除
		document.body.removeChild(down)
		ElMessage.success('下载成功')
	})
}

const handleSuccess: UploadProps['onSuccess'] = (res: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	console.log('打印上传以后的信息' + JSON.stringify(res))
	if (res && res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	} else {
		ElMessage.success('上传成功')
	}
	picShow.value = true
	console.log('打印图片的状态', picShow.value)
	uploadRef.value?.clearFiles()
}
</script>

<style>
.image_button {
	height: 400px;
	overflow-y: auto;
	border: none;
}
/* 上传框样式 */
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
